<template>
  <p>fe---<span>{{ title }}</span></p>
  <p>接收兄弟组件传递信息-- {{ msg }}</p>
  <el-button @click="emit">发送信息</el-button>
  <div class="container">
    <div class="block"></div>
  </div>
  <echarts width="500px" height="500vh" :options="options"></echarts>
  <echarts width="500px" height="500vh" :options="scatterOptions"></echarts>
</template>
<script setup>
import echarts from '@/components/Echarts.vue'
import { reactive, onMounted } from 'vue'
import emitter from '@/utils/bus'
const props = defineProps({
  title: {
    type: String,
    default: ''
  }  
})
const msg = ref()
emitter.on('msg', data => {
  msg.value = data
})
const options = reactive({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
})
const scatterOptions = reactive({
  xAxis: {},
  yAxis: {},
  graphic: {
    type: 'text',
    style: {
      text: '测试',
      textAlign: 'middle',
      textVerticalAlign: 'middle',
      fontSize: 30,
      x: 200,
      y: 200,
      fill: '#f00'
    }
  },
  series: [
    {
      type: 'scatter',
      data: []
    }
  ]
})
onMounted(() => {
  options.series[0].data = [0,5,20,40,10]
  scatterOptions.series[0].data = [[10, 5],[0, 8],[6, 10],[2, 12],[8, 9]]
})
const emits = defineEmits(['update:title'])
const emit = () => {
  emits('update:title', '发送信息')
}
Promise.resolve(1).then(res => {
  console.log(res)
  Promise.reject('错误')
}).catch(err => {
  console.log(err)
})
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(100)
  }, 5000)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(500)
  }, 1000)
})
Promise.allSettled([p1, p2]).then(res => {
  console.log(res)
})
function test() {
  return Promise.reject('geg')
}
async function test2() {
  try {
    let pro = await test()
    console.log(pro)
  } catch(error) {
    console.log(error)
  }
}
test2()
</script>
<style lang="scss">
p {
  color: #f00;
  span {
    color: #0f0;
  }
}
.container {
  width: 200px;
  height: 200px;
  background: #f00;
  position: relative;
}
.block {
  width: 100px;
  height: 100px;
  background: #0f0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}
.left {
  float: left;
}
.contain {
  overflow: hidden;
}
</style>